<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>3.简单模拟一个Vue中的数据劫持</title>
  </head>
  <body>
    <h2 id="title">尚硅谷</h2>
    <script type="text/javascript" >
      let vm = {
        $jing:'马志强',
        $qiang:'xiaohigh',
        $yue:'段奕宏',
        _data:{},
        _jing:'xxx',
        _qiang:'xxx',
        _jyue:'xxx'
      }

      // 数据劫持开始
      let obs = '尚硅谷'
      Object.defineProperty(vm._data,'school',{
        get:function reactiveGetter(){
          return obs
        },
        set:function reactiveSetter(value){
          obs = value
          console.log(`我是Vue底层，我发现school变化了，值为：${value}，我要寻找页面中用到school的地方，更新一下`)
          document.getElementById('title').innerText = value
        }
      })
      // 数据劫持结束

      // 数据代理开始
      Object.defineProperty(vm,'school',{
        get:function proxyGetter(){
          return vm._data.school
        },
        set:function proxySetter(value){
          vm._data.school = value
        }
      })
      // 数据代理结束
      
    </script>
  </body>
</html>